<template>
	<view class="listPane">
		<view class="paneHead">
			<text class="title">新书热卖榜</text>
			<view class="more"  @click="navItemClick()">查看更多<uniIcon type="arrowright" size="18"></uniIcon>
			</view>
		</view>
		<view class="paneBody">
			<view class="goodsItem" @click="navigateTo1">
				<view class="goods">
					<view class="imageWrapper">
						<image src="https://img11.360buyimg.com/n1/s200x200_jfs/t30334/279/1310794156/401599/fdb3f65d/5cdd1807N26004689.jpg"
						 mode="widthFix" style="width: 100%;"></image>
					</view>
					<view class="title"><text>动手学深度学习(异步图书出品)</text></view>
					<view class="price">&yen;71.20</view>
				</view>
			</view>
			<view class="goodsItem" @click="navigateTo2">
				<view class="goods">
					<view class="imageWrapper">
						<image src="https://img14.360buyimg.com/n7/jfs/t1/77715/7/7959/82482/5d5fa26bEff40eea3/8b17921521df8b17.jpg"
						 mode="widthFix" style="width: 100%;"></image>
					</view>
					<view class="title"><text>机器学习: 原理、算法与应用</text></view>
					<view class="price">&yen;74.80</view>
				</view>
			</view>
			<view class="goodsItem" @click="navigateTo3">
				<view class="goods">
					<view class="imageWrapper">
						<image src="https://img11.360buyimg.com/n7/jfs/t1/45231/24/7941/300092/5d5a189cEd3fc0833/a398bc339e81ff23.jpg"
						 mode="widthFix" style="width: 100%;"></image>
					</view>
					<view class="title"><text>计算智能导论</text></view>
					<view class="price">&yen;43.90</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods:{
			navItemClick(){
				uni.navigateTo({
					url:'/pages/goodsdetails/goodsdetails'
				})
			},
			navigateTo1(){
				uni.navigateTo({
					url:'/pages/book1/book1'
				})
			},
			navigateTo2(){
				uni.navigateTo({
					url:'/pages/book2/book2'
				})
			},
			navigateTo3(){
				uni.navigateTo({
					url:'/pages/book3/book3'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listPane {
		background: #fef2ec;
		border-radius: 30upx;
		margin-top: 10upx;
		margin: 10rpx 20rpx;
		;

	}

	.paneHead {
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
		padding: 0 40upx;
	}

	.title {
		font-size: 42upx;
		font-weight: 600;
	}

	.more {
		font-size: 28upx;
		color: #808080;
		font-weight: 550;
	}.paneBody{
		padding:10upx;
		display: flex;
		flex-direction: row;
		padding-bottom: 30upx;
		.goodsItem{
			width: calc(100%/3);
			box-sizing: border-box;
			padding: 10upx;
			
			.goods{
				background: white;
				border-radius: 20upx;
				.imageWrapper{
					border-bottom: solid 1px #F1F1F1;
					padding: 10upx;
				}
				.title{
					height: 80upx;
					width: 100%;
					font-size: 24upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp:2;
					-webkit-box-orient:vertical;
					padding: 10upx;
					box-sizing: border-box;
			}.more{
				font-size: 28rpx;
				color: #808080;
			}
			.price{
				color: red;
				font-size: 24upx;
				padding: 10upx;
			}
		}
		
	}
}
</style>
